<template>
  <div style="padding: 20px;">
    <el-row :gutter="20">
      <el-col :span="16">
        <el-row :gutter="10">
          <el-col :span="24">
            <el-row :gutter="10">
              <el-col :span="8" :key="index" v-for="(item, index) of allWrp">
                <div class="all_warp_list">
                  <div class="all_warp_header" style="display: flex;">
                    <img src="@/assets/images/homeIocn16.png" style="width: 20px;height: 20px;margin-right: 10px;"
                      alt="">
                    {{ item.title }}
                  </div>
                  <div class="all_warp_center">
                    <div class="center_text">{{ item.text }}</div>
                    <div class="center_img">
                      <img style="width: 100%;height: 100%;" :src="item.img" alt="">
                    </div>
                  </div>
                </div>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="24">
            <el-card style="margin-top: 10px;">
              <div slot="header" class="clearfix" style="display: flex;">
                <div
                  style="width: 4px;height: 16px;background-color: #366EF4;display: inline-block;border-radius: 5px;margin: 2px 5px 0 0;">
                </div>
                <div>快捷入口</div>
              </div>
              <div>
                <div class="quick_warp">
                  <div class="quick_wrp_list" @click="toLink(item)" :key="index" v-for="(item, index) of quick">
                    <div class="quick_img">
                      <img style="width: 100%;height: 100%;" :src="item.img" alt="">
                    </div>
                    <div class="quick_text"> {{ item.title }} </div>
                  </div>
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="24">
            <el-row :gutter="10" style="margin-top: 10px;">
              <el-col :span="12">
                <el-card>
                  <div class="site_titel" style="color:#C87825;">污水处理站</div>
                  <div class="site_list">
                    <div class="site_text" style="color:#C87825;">{{ groupData }}</div>
                    <div class="site_img">
                      <img style="width:350px;height: 250px;" src="@/assets/images/homeIocn15.png" alt="">
                    </div>
                  </div>
                </el-card>
              </el-col>
              <el-col :span="12">
                <el-card>
                  <div class="site_titel" style="color:#238182;">视频监控数</div>
                  <div class="site_list">
                    <div class="site_text" style="color:#238182;">{{ videoData }}</div>
                    <div class="site_img">
                      <img style="width:350px;height: 250px;" src="@/assets/images/homeIocn14.png" alt="">
                    </div>
                  </div>
                </el-card>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="8">
        <el-row :gutter="10">
          <el-col :span="24">
            <el-card style="margin-top: 10px;">
              <div>
                <Calendar :chartData="chartDataList" @nowMonthFun="nowMonthFun" @calendarFun="calendarFun" />
              </div>
            </el-card>
          </el-col>
          <el-col :span="24">
            <el-card style="margin-top: 10px;">
              <div slot="header" style="display: flex;justify-content: space-between;">
                <div style="display: flex;">
                  <div
                    style="width: 4px;height: 16px;background-color: #366EF4;display: inline-block;border-radius: 5px;margin: 2px 5px 0 0;">
                  </div>
                  <div>系统通知</div>
                </div>
                <div>
                  <el-button @click="toNotice" style="float: right; padding: 3px 0" type="text">更多</el-button>
                </div>
              </div>
              <div class="scroll-container">
                <div class="system_warp" :key="index" v-for="(item, index) of noticeList">
                  <div class="system_warp_left">
                    <span class="warp_left_iocn"
                      :style="{ backgroundColor: item.noticeType == 1 ? '#007afc' : item.noticeType == 2 ? '#ff9a35' : '#ff1010' }"></span>
                    {{ item.noticeTitle }}
                  </div>
                  <div class="system_warp_right">{{ parseTime(item.createTime, '{y}-{m}-{d}') }}</div>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <el-dialog title="巡检计划" :visible.sync="seeAlsoOpen" width="600px" append-to-body>
      <div></div>
      <div slot="footer" style="text-align: center;">
        <el-button @click="seeAlsoOpen = false">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Calendar from "@/components/Calendar";
import { listNotice } from "@/api/system/notice";
import { listDeviceShort } from '@/api/iot/device';
import { listGroup } from '@/api/iot/group';
import { taskRecordByMonth, planTaskListByDay } from '@/api/home/home';
import { listAlertLog } from '@/api/iot/alertLog';
import { getCenterTotal, getInspectionRecordListByGroupId } from "@/api/site/isRecord";
export default {
  name: 'Index',
  components: { Calendar },
  data() {
    return {
      allWrp: [{
        img: require('@/assets/images/homeIocn06.png'),
        title: '设备数量',
        text: '21'
      },
      {
        img: require('@/assets/images/homeIocn01.png'),
        title: '已运行天数',
        text: '30'
      }, {
        img: require('@/assets/images/homeIocn02.png'),
        title: '告警数量',
        text: '0'
      }, {
        img: require('@/assets/images/homeIocn03.png'),
        title: '已处理告警',
        text: '0'
      }, {
        img: require('@/assets/images/homeIocn04.png'),
        title: '巡检次数',
        text: '0'
      },
      {
        img: require('@/assets/images/homeIocn05.png'),
        title: '隐患整改率',
        text: '0%'
      }],
      quick: [{
        img: require('@/assets/images/homeIocn13.png'),
        title: '新增设备',
        link: '/iot/device'
      }, {
        img: require('@/assets/images/homeIocn11.png'),
        title: '视频监控',
        link: '/video/splitview'
      }, {
        img: require('@/assets/images/homeIocn10.png'),
        title: '告警处理',
        link: '/ruleengine/alertLog'
      }, {
        img: require('@/assets/images/homeIocn08.png'),
        title: '巡检日志',
        link: '/Inspection/InspectionLog'
      }, {
        img: require('@/assets/images/homeIocn12.png'),
        title: '巡检隐患',
        link: '/Inspection/InspectionDanger'
      }, {
        img: require('@/assets/images/homeIocn09.png'),
        title: '历史数据',
        link: '/site/recordSite?type=1'
      }, {
        img: require('@/assets/images/homeIocn07.png'),
        title: '设备统计',
        link: '/iot/template'
      }],
      seeAlsoOpen: false,
      noticeList: [],
      groupData: 0,
      videoData: 0,
      chartDataList: [],
      dayValue: ''
    }
  },
  created() {
    this.allWrp[1].text = this.daysUntil()
    this.getList();
    this.deviceListFun();
    this.inspectionPlanRecordFun();
    this.listAlertFun(2);
    this.listAlertFun(3);
    // this.listGroupFun();
    // this.todayDate();
  },
  methods: {
    todayDate() {
      const now = new Date();
      const year = now.getFullYear();
      const month = (now.getMonth() + 1).toString().padStart(2, '0');
      const day = now.getDate().toString().padStart(2, '0');
      this.dayValue = `${year}-${month}`;
      this.taskRecordByMonthFun(`${year}-${month}`);
    },
    taskRecordByMonthFun(day) {
      taskRecordByMonth({
        inspectionMonth: day,
      }).then((res) => {
        let arr = []
        for (let item of res.data) {
          item['time'] = item.inspectionDate;

          arr.push(item)
        }
        this.chartDataList = arr;
      })
    },
    /** 查询公告列表 */
    getList() {
      listNotice({
        pageNum: 1,
        pageSize: 10,
      }).then(response => {
        this.noticeList = response.rows;
      });
    },
    calendarFun(data) {
      this.seeAlsoFun(data.time)
      this.planTaskListByDayFun(data.time)
    },
    planTaskListByDayFun(day) {
      planTaskListByDay({
        inspectionDay: day,
      }).then((res) => {
        if (res.data.lenght > 0) {
          this.seeAlsoOpen = true;
        } else {
          this.seeAlsoOpen = false;
        }
      })
    },
    nowMonthFun(data) {
      this.taskRecordByMonthFun(data.dayData);
    },
    seeAlsoFun(e) {
      console.log(e)
    },
    toLink(item) {
      this.$router.push(item.link)
    },
    toNotice() {
      this.$router.push('/system/notice')
    },
    daysUntil() {
      let today = new Date();
      let endDate = new Date('2024-12-01T00:00:00')
      const oneDay = 24 * 60 * 60 * 1000; // 每天的毫秒数
      let isData = Math.round(Math.abs((endDate - today) / oneDay));
      return isData
    },
    /** 查询所有简短设备列表 */
    deviceListFun() {
      let params = {
        pageSize: 999,
        pageNum: 1,
      }
      getCenterTotal().then((response) => {
        let deviceList = response.data;
        this.allWrp[0].text = deviceList.groups;
        this.videoData = deviceList.sipNum;
        this.groupData = deviceList.groups;
      });
    },
    listGroupFun() {
      let params = {
        pageSize: 999,
        pageNum: 1,
      }
      listGroup(params).then((res) => {
        let groupList = res.rows;
        this.groupData = groupList.length;
      })
    },
    inspectionPlanRecordFun() {
      getInspectionRecordListByGroupId({
        inspectionStatus: 'Y'
      }).then(res => {
        if (res.code == 200) {
          this.allWrp[4].text = res.data.length;
        }
      })
    },
    listAlertFun(type) {
      listAlertLog({
        pageNum: 1,
        pageSize: 10,
        status: type
      }).then(res => {
        if (res.code == 200) {
          if (type == 2) {
            this.allWrp[2].text = res.total
          }
          if (type == 3) {
            this.allWrp[3].text = res.total
          }
        }
      })
    },
  }
}
</script>

<style lang="scss" scoped>
body,
html {
  margin: 0;
  padding: 0;
}

.all_warp_list {
  background: #FFFFFF;
  box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.1);
  border-radius: 4px 4px 4px 4px;
  margin: 5px;
  padding: 10px 20px;

  .all_warp_header {
    font-family: PingFang SC, PingFang SC;
    font-weight: bold;
    font-size: 14px;
    color: #595959;
  }

  .all_warp_center {
    display: flex;
    justify-content: space-between;

    .center_text {
      font-family: DIN, DIN;
      font-weight: bold;
      font-size: 28px;
      color: #2F2F2F;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .center_img {
      width: 80px;
      height: 80px;
    }
  }
}

.quick_warp {
  display: flex;
  cursor: pointer;

  .quick_wrp_list {
    text-align: center;
    flex: 1;

    .quick_img {
      margin: auto;
      text-align: center;
      width: 80px;
      height: 80px;
    }

    .quick_text {
      font-family: PingFang SC, PingFang SC;
      font-weight: bold;
      font-size: 18px;
      color: #666666;
      margin-top: 10px;
    }
  }
}

.site_titel {
  font-family: PingFang SC, PingFang SC;
  font-weight: bold;
  font-size: 20px;
}

.site_list {
  display: flex;

  .site_text {
    font-family: DIN, DIN;
    font-weight: bold;
    font-size: 36px;
    width: 100px;
    padding-top: 40px;
    text-align: center;
  }

  .site_img {}

}

.system_warp {
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid gainsboro;
  cursor: pointer;

  .system_warp_left {
    flex: 1;
    max-width: 300px;
    overflow: hidden;
    /*内容超出后隐藏*/
    text-overflow: ellipsis;
    /*超出内容显示为省略号*/
    white-space: nowrap;
    /*文本不进行换行*/

    .warp_left_iocn {
      display: inline-block;
      width: 10px;
      height: 10px;
      border-radius: 50%;
    }
  }

  .system_warp_right {
    width: 100px;
    text-align: right;
  }
}

/* 适用于 Firefox */
/* 隐藏滚动条的同时仍能滚动 */
.scroll-container {
  height: calc(100vh - 610px);
  overflow: auto;
  /* 启用滚动功能 */
  -ms-overflow-style: none;
  /* 适用于 Internet Explorer 和旧版 Edge */
  scrollbar-width: none;
  /* 适用于 Firefox */
}

/* Webkit 浏览器 */
.scroll-container::-webkit-scrollbar {
  display: none;
  /* 隐藏滚动条 */
}
</style>
